When deployed to GitHub Pages, the website was not loading any images or videos due to incorrect asset path handling. GitHub Pages serves project repositories under a /web-novit base path, but the application was not properly accounting for this in asset references.

Problem

The original issue manifested as:

• Logo images showing broken image placeholders
• Background videos not loading
• Case study images displaying as broken links
• All static assets returning 404 errors when accessed through GitHub Pages

Root Cause

The problem had multiple components:

1. Static assets in /public weren't being moved to the correct GitHub Pages structure - the post-build script was only moving locale directories and Next.js bundles, but leaving root-level assets like logos and favicons at the wrong path.

2. Asset path function was inconsistent - the getAssetPath function wasn't properly adding the /web-novit base path for GitHub Pages builds.

3. Navigation links were incorrectly using asset path logic - components were using getAssetPath for navigation hrefs, causing double base path application.

Solution

1. Enhanced Post-build Script

Updated scripts/post-build.js to properly copy root-level assets:

const rootAssets = [
  'novit-logo-official.png',
  'novit-icon-only.svg', 
  'favicon.png',
  'robots.txt',
  'site.webmanifest',
  'sitemap.xml'
];

2. Fixed Asset Path Logic

Corrected getAssetPath in src/config/constants.ts to properly detect GitHub Pages environment and add base path:

export function getAssetPath(path: string): string {
  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
  if (normalizedPath.startsWith('/web-novit')) {
    return normalizedPath;
  }
  const isGitHub = isOnGitHubPages();
  if (isGitHub) {
    return `/web-novit${normalizedPath}`;
  }
  return normalizedPath;
}

3. Separated Navigation and Asset Paths

Created getNavigationPath function to handle navigation links separately from static assets, preventing double base path application.

4. Updated Components

Modified all components to use the appropriate function:

• getAssetPath() for images, videos, logos, favicons
• getNavigationPath() for navigation hrefs and internal links

Result

All assets now load correctly in both environments:

• Local development: http://localhost:3000/images/logo.png
• GitHub Pages: http://novitsoftware.github.io/web-novit/images/logo.png

The website is now fully functional on GitHub Pages with all images and videos loading properly.

Fixes #61.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.